<!--
 * @Author: Hzh
 * @Date: 2021-04-23 10:13:38
 * @LastEditTime: 2021-04-23 15:47:58
 * @LastEditors: Hzh
 * @Description:
-->
<template>
  <div class="home">
    <div class="FZGL_card">
      <div class="FZGL_title">
        <div class="big_title">仿真管理</div>
      </div>
      <div class="FZGL_content">
        <div class="search">
        <el-input placeholder="搜索" v-model="input3">
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <div class="tree">
        <el-tree :data="data" :props="defaultProps" default-expand-all></el-tree>
        <!-- <el-tree
            :data="data"
                :props="defaultProps"
                accordion
                @node-mouseenter="handleNodeMouseEnter"
                @node-mouseleave="handleNodeMouseLeave"
                @node-click="handleNodeClick"
              >
              </el-tree> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input3: "",
      data: [
        {
          label: "断路器",
          children: [
            {
              label: "A相",
              children: [
                {
                  label: "电场仿真",
                  children: [
                    {
                      label: "断路器电势"
                    },
                    {
                      label: "绝缘筒电场"
                    },
                    {
                      label: "绝缘筒沿面电场"
                    }
                  ]
                },
                {
                  label: "温度场仿真",
                  children: [
                    {
                      label: "主回路温度"
                    },
                    {
                      label: "外壳温度"
                    },
                    {
                      label: "主触头温度1"
                    },
                    {
                      label: "主触头温度2"
                    }
                  ]
                }
              ]
            },
            {
              label: "B相",
              children: [
                {
                  label: "电场仿真",
                  children: [
                    {
                      label: "断路器电势"
                    },
                    {
                      label: "绝缘筒电场"
                    },
                    {
                      label: "绝缘筒沿面电场"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  name: "Home",
  components: {},
  mounted() { },
  methods: {}
};
</script>
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

.home {
  width: 608px;
  height: 592px;
  // margin: 0 auto;
}

.FZGL_card {
  width: 100%;
  height: 592px;
  position: relative;
  width: 100%;
  background: url("../assets/FZGL-BG.png") no-repeat;
  // background-color: #101d29;
  margin-bottom: 10px;

  // 标题
  .FZGL_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  // 大标题
  .big_title {
    width: 144px;
    height: 40px;
    line-height: 38px;
    font-size: 20px;
    font-weight: bold;
    font-family: MicrosoftYaHei-Bold;
    line-height: 38px;
    color: #e8e8e8;
    padding-left: 56px;
    text-align: center;
    flex: 1;
    /* 占据左边的剩余空间 */
    text-align: left;
  }

  // // 小标题
  // .xiao_title {
  //   height: 16px;
  //   font-family: MicrosoftYaHei;
  //   font-size: 16px;
  //   font-weight: normal;
  //   font-stretch: normal;
  //   letter-spacing: 0px;
  //   color: #40e5f0;
  //   flex: 0.1;
  //   margin-right: 42px;
  //   /* 占据右边的剩余空间 */
  //   text-align: right;
  // }

  .FZGL_content {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    box-sizing: border-box;
    width: 608px;
    height: 552px;
    /* padding: 20px 10px; */
    /* margin: 20px 26px 0 46px; */
    padding: 20px;

    .search {
      width: 210px;
      height: 26px;
      // background-color: pink;
    }

    .tree {
      width: 280px;
      height: 232px;
      // background-color: #fff;
      margin-top: 26px;
      margin-left: 6px;
    }
  }
}

::v-deep .el-input__inner {
  color: #fff;
  background-color: #202f3e;
  border: solid 1px #40486a;

  .el-icon-search {
    border-radius: 2px;
  }
}

::v-deep .el-tree {
  background-color: transparent;
  color: #fff;

  .el-tree-node {
    margin-top: 4px;
  }

  .el-tree-node__content:hover {
    background-color: #3e6285;
    // color: #37c2cd;
  }

  //.el-tree-node__content:hover {
    //background-color: #172533;
    // color: #37c2cd;
  //}

  .el-tree-node:focus>.el-tree-node__content {
    background-color: #172533 !important;
    color: #40e5f0;
  }
}
</style>
